Make a change diff and setGlobal

[ReactN useGlobal can fire even if the reference does not change.

In other words, if the entire object is passed to setGlobal, all hooks will be triggered and redrawn.

After thinking for a while about how to deal with it, I realized that passing the entire object is a case of making a destructive update by creating a whole draft in immer, so I changed my own utility function updateGlobal for that purpose to a "make change diff and update" mechanism.

before

code:ts

import { State } from "reactn/default";

import { setGlobal } from "reactn";

import { produce } from "immer";

export const updateGlobal = (update: (g: State) => void) => {

// update global variable in destructive manner using immer

setGlobal((g: State) => {

return produce(g, update);

});

};

after

code:ts

import { State } from "reactn/default";

import { setGlobal } from "reactn";

import { produce } from "immer";

export const updateGlobal = (update: (draft: State) => void) => {

// update global variable in destructive manner using immer

setGlobal((current_state: State) => {

const new_state = produce(current_state, update);

// @ts-ignore

// @ts-ignore

}

});

return update_delta;

});

};

before / after

A simple mousedown that took 120ms to redraw the entire screen is now only 4.8ms for the necessary part.

---